#!/usr/bin/env bash

readonly MODULE="examples/$1"
readonly AUTHOR="Karsten Schmidt"
readonly EMAIL="k+npm@thi.ng"

echo "generating module: $MODULE"
mkdir -p "$MODULE"

echo "creating /src folder..."
mkdir -p "$MODULE"/src
cat << EOF > "$MODULE"/src/index.ts
import { div } from "@thi.ng/hiccup-html";
import { \$compile } from "@thi.ng/rdom";

\$compile(div({}, "hello")).mount(document.getElementById("app")!);
EOF

cat << EOF > "$MODULE"/src/vite-env.d.ts
/// <reference types="vite/client" />
EOF

cat << EOF > "$MODULE"/src/components.mcss
// put component specific thi.ng/meta-css style defs here...
// these will be included in the generated CSS via the \`css:build\`
// and \`css:watch\` script aliases in \`package.json\`
EOF

echo "creating /css folder..."
mkdir -p "$MODULE"/css
cat << EOF > "$MODULE"/css/style.mcss
// thi.ng/meta-css stylesheet
// see package readme for more details/usage
// use \`yarn css:build\` or \`yarn css:watch\` to transpile to CSS
// also see component-specific *.mcss files in /src folder

// (optional) variable declarations
:root {
	// color1=#fff
}

body { system-sans-serif ma3 }
EOF

cat << EOF > "$MODULE"/css/includes.txt
// list of CSS class names to force-include in generated CSS
// (one class per line, basic wildcards supported)
EOF

cat << EOF > "$MODULE"/css/custom.mcss.json
{
	"tables": {},
	"vars": {},
	"decls": [],
	"specs": [],
	"templates": []
}
EOF

echo "writing package.json..."
cat << EOF > "$MODULE"/package.json
{
	"name": "@example/$1",
	"version": "0.0.1",
	"private": true,
	"description": "TODO",
	"repository": "https://github.com/thi-ng/umbrella",
	"author": "$AUTHOR <$EMAIL>",
	"license": "Apache-2.0",
	"scripts": {
		"start": "yarn css:build && yarn start:only",
		"start:only": "vite --host --open",
		"dev": "mprocs 'yarn css:watch' 'yarn start:only'",
		"css:watch": "../../node_modules/.bin/metacss develop --bundle --watch --pretty --out-specs css/framework.json --out-css css/style.css --force @css/includes.txt ../../packages/meta-css/specs/*.mcss.json css/*.mcss.json css/*.mcss src/*.mcss",
		"css:build": "../../node_modules/.bin/metacss develop --bundle --out-specs css/framework.json --out-css css/style.css --force @css/includes.txt ../../packages/meta-css/specs/*.mcss.json css/*.mcss.json css/*.mcss src/*.mcss",
		"build": "yarn css:build && tsc && vite build --base='./'",
		"preview": "vite preview --host --open"
	},
	"devDependencies": {
		"@thi.ng/meta-css": "workspace:^",
		"typescript": "^5.9.3",
		"vite": "^7.2.4"
	},
	"dependencies": {
		"@thi.ng/api": "workspace:^",
		"@thi.ng/hiccup-html": "workspace:^",
		"@thi.ng/rdom": "workspace:^"
	},
	"browser": {
		"process": false
	},
	"thi.ng": {
		"readme": false,
		"screenshot": "examples/$1.png"
	}
}
EOF

echo "writing tsconfig.json..."
cat << EOF > "$MODULE"/tsconfig.json
{
	"extends": "../tsconfig.json",
	"include": ["src/**/*"],
	"compilerOptions": {
	}
}
EOF

echo "writing vite.config.js..."
cat << EOF > "$MODULE"/vite.config.js
export default {
	build: {
		target: "esnext",
		sourcemap: true,
	},
};
EOF

echo "writing index.html..."
cat << EOF > "$MODULE"/index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<link
		rel="icon"
		href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">⛱️</text></svg>'
    />
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>$1 · @thi.ng/umbrella</title>
	<link href="/css/style.css" rel="stylesheet">
	<script>window.goatcounter = { path: (p) => location.host + p };</script>
	<script data-goatcounter="https://thing.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
</head>
<body>
	<div id="app"></div>
	<div><a class="link" href="https://github.com/thi-ng/umbrella/tree/develop/examples/$1">Source code</a></div>
	<script type="module" src="/src/index.ts"></script>
</body>
</html>
EOF

echo "writing README.md..."
cat << EOF > "$MODULE"/README.md
# $1

![screenshot](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/$1.png)

[Live demo](http://demo.thi.ng/umbrella/$1/)

## Developing & building

Please refer to the instructions on the wiki:

- [Development](https://github.com/thi-ng/umbrella/wiki/Development-mode-for-examples-using-thi.ng-meta%E2%80%90css)
- [Production build](https://github.com/thi-ng/umbrella/wiki/Example-build-instructions)

## Authors

- $AUTHOR

## License

&copy; 2024 $AUTHOR // Apache Software License 2.0
EOF

echo "refreshing monorepo index..."
yarn install
echo "DONE"
